<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">我的俱乐部/协会</block>
		</cu-custom>
		
		<scroll-view scroll-x class="bg-white nav text-center" :style="[{top:CustomBar + 'px'}]">
			<view class="cu-item csitem" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"
			 :data-id="index">
				{{tabNav[index]}}
			</view>
		</scroll-view>
		<block v-if="TabCur==0">
			<view class="cu-card article"> 
				<view class="cu-item shadow maininfo" v-for="(item,index) in clubs" :data-mid="item.id" :key="index" >
					<view class="content">
						<image :src="item.logourl"
						 mode="aspectFill"></image>
						<view class="desc">
							<view class="text-content">
								<view class="name">{{item.name}}<label class="mycs-unum">({{item.usernum}})人</label> <label v-if="item.icreate" class="icreate cu-tag bg-red light sm round">我创建的</label><label v-if="!item.icreate" class="icreate cu-tag bg-blue light sm round">我加入的</label></view>
								<view class="mycs-m"  @click="call" :data-tel="item.manager_tel">管理员：{{item.manager_name}} <label class="cuIcon-dianhua mycs-t"></label></view>
								
							</view>
							<view class="info-join">
								<navigator hover-class="none"  :url="'/pages/tennis/club_soci/info?id='+item.id">
									<button class="navto">查看详情</button>
								</navigator>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="TabCur==1">
			<view class="cu-card article">
				<view class="cu-item shadow maininfo" v-for="(item,index) in socis" :data-mid="item.id" :key="index" >
					<view class="content">
						<image :src="item.logourl"
						 mode="aspectFill"></image>
						<view class="desc">
							<view class="text-content">
								<view class="name">{{item.name}}<label class="mycs-unum">({{item.usernum}})人</label> <label v-if="item.icreate" class="icreate cu-tag bg-red light sm round">我创建的</label><label v-if="!item.icreate" class="icreate cu-tag bg-blue light sm round">我加入的</label></view>
								<view class="mycs-m" @click="call" :data-tel="item.manager_tel">管理员：{{item.manager_name}} <label class="cuIcon-dianhua mycs-t" ></label></view>
								
							</view>
							<view class="info-join">
								<navigator hover-class="none" :url="'/pages/tennis/club_soci/info?id='+item.id">
									<button class="navto">查看详情</button>
								</navigator>
							</view>
						</view>
					</view>
				</view>
			
			</view>
		</block>
	</view>
</template>

<script>
	
	export default {
		onLoad(option){
			console.log(this.openid);
			this.userid=uni.getStorageSync("uid");
			this.openid=uni.getStorageSync("openid");
			if(this.userid.length<=0 || this.openid.length<=0){
				uni.showModal({
				    title: '提示',
				    content: '您暂未登陆,是否马上登陆',
				    success: function (res) {
				        if (res.confirm) {
							uni.switchTab({
								url:"/pages/tennis/user/index"
							})
				        } else if (res.cancel) {
				           uni.navigateBack({
				           	
				           })
				        }
				    }
				});
				return;
			}
			uni.showLoading({
				title:'加载中...'
			})
			uni.request({
				url: 'https://www.52tennis.cn/Club_Soci/GetListPage', //仅为示例，并非真实接口地址。
				data: {
					cors:1,
					city:"",
					name:"",
					openid:this.openid,
					currpage:1,
					pagesize:100,
				},
				success:(data)=> {
					
					console.log(data);
					if(data.data.result==1){
						
						this.clubs=data.data.returnjson;
						
					}else{
						uni.showToast({
							title: '请求错误',
							icon: 'fail',
							mask: true,
							duration: 3000
						})
					}
				},
				fail:(res)=>{
					uni.showToast({
						title: '请求失败',
						icon: 'fail',
						mask: true,
						duration: 2000
					})
				},
				complete:()=>{
					
				}
			}),
			uni.request({
				url: 'https://www.52tennis.cn/Club_Soci/GetListPage', //仅为示例，并非真实接口地址。
				data: {
					cors:2,
					city:"",
					name:"",
					openid:this.openid,
					currpage:1,
					pagesize:100,
				},
				success:(data)=> {
					
					console.log(data);
					if(data.data.result==1){
						this.socis=data.data.returnjson;
					}else{
						uni.showToast({
							title: '请求错误',
							icon: 'fail',
							mask: true,
							duration: 3000
						})
					}
				},
				complete: () => {
					uni.hideLoading();
				}
			})
			
		},
		data() {
			
			return {
				userid:"",
				openid:"",
				tabNav:['俱乐部','协会'],
				TabCur: 0,
				CustomBar: this.CustomBar,
				modalName: null,
				cardCur: 0,
				clubs:[],
				socis:[],
				
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			call(e){
				let tel = e.currentTarget.dataset.tel;
				uni.makePhoneCall({
				    phoneNumber: tel //仅为示例
				});
			}
		}
	}
</script>

<style>
	.icreate{
		float:right
	}
	.mycs-unum{
		font-size: 28rpx;
		margin-left: 15rpx;
	}
	.mycs-t{
		margin-left: 10rpx;
	}
	.icreate{
		font-size: 24rpx;
	}
</style>
